<template>
	<view class="u-page">
		<!-- <u-navbar title="设施详情" leftIconColor="#FFF" bgColor="#ff5000" :titleStyle="{ fontWeight:'bold',color:'white' }" :autoBack="true"
			:placeholder="true">
		</u-navbar> -->
		<view class="aaa">
			<u-tabs :list="subList" lineColor="#ff5000" :scrollable="false" @click="tabClick"></u-tabs>
		</view>
		<!-- <u-divider style="margin: 3px;"></u-divider> -->
		<view v-if="selectItem == '基本信息'">
			<comp-detailed-info :info="detailedInfo" :unit="unit"></comp-detailed-info>
		</view>
		<view v-if="selectItem == '巡检记录'" :style="getHeight()">
			<comp-inspection-records :selectId="facilityId"></comp-inspection-records>
		</view>
		<view v-if="selectItem == '运行监测'">
			<compYxjcInfo :info="detailedInfo"></compYxjcInfo>
		</view>
		<view v-if="selectItem == '设施全景'">
			<u-swiper style="margin-top: 200rpx;" :list="imgList" :height="282"></u-swiper>
		</view>
	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../../common/wst_hydra-1.0.0.js');


	import coordtransform from 'coordtransform';
	import {
		queryFacility,
		getDictionaryData
	} from '@/common/api.js';
	import compDetailedInfo from "./components/comp-detailed-info"
	import compInspectionRecords from "./components/comp-inspection-records"
	import compYxjcInfo from "./components/comp-yxjc-info"

	export default {
		components: {
			compDetailedInfo,
			compYxjcInfo,
			compInspectionRecords
		},
		data() {
			return {
				facilityId: '',
				subList: [{
					name: '基本信息',
				}, {
					name: '巡检记录',
				}, {
					name: '运行监测'
				}, {
					name: '设施全景'
				}],
				detailedInfo: null,
				selectItem: "基本信息",
				imgList: [],
				unit: "",
			}
		},
		methods: {
			tabClick(e) {
				this.selectItem = e.name
			},
			getHeight() {
				let a = uni.getSystemInfoSync().windowHeight - 70
				return {
					'height': a + 'px'
				}
			}
		},
		onShow() {
			document.body.style.overflow = 'auto';
		},
		async mounted() {
			document.body.style.overflow = 'auto';
			let that = this;
			try {
				let res = await queryFacility(this.facilityId);
				if (res != null) {
					that.detailedInfo = res
					if (res.projectFacilitiesZpDtoList != null &&
						res.projectFacilitiesZpDtoList.length > 0) {
						that.imgList = res.projectFacilitiesZpDtoList.map(item => {
							return item.zpzsdz;
						})
					}
					let params = {
						status: "Enabled",
						type: "SPONGE_FACILITY_TYPE"
					}
					const dictionaryData = await getDictionaryData(params);
					that.unit = dictionaryData.find(it => it.id === that.detailedInfo.facilities_type).ms;
				}
			} catch (error) {
				// 处理请求失败的逻辑
				console.error(error);
			}
		},
		onLoad(options) {
			this.facilityId = options.id
		}
	};
</script>
<style lang="scss" scoped>
</style>